<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../normalize.css">
    <title>不确定宽度的块级元素水平居中3</title>
</head>
<body>
    <style type="text/CSS">
        ul{list-style:none; margin:0; padding:0}
        .wrap{background:#000; width:500px; height:100px}
        .test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}
        .test li{float:left; display:inline; margin-right:5px; position:relative;left:-50%;}
        .test a{float:left; width:20px; height:20px; text-align:center; line-height:20px;background:#316AC5; color:#fff; border:1px solid #316AC5; text-decoration:none;}
        .test a:hover{background:#fff; color:#316AC5}
    </style>
    <div class="wrap">
        <ul class="test">
            <li><a href="#">1</a></li>
        </ul>
        <ul class="test">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
        <ul class="test">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
</body>
</html>